{include file="public/header"/}
<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link rel="stylesheet" type="text/css" href="/public/static/admin/easyui/jeasyui/themes/icon.css">
<style>
	html,
	body {
		background-color: #fff;
	}

	.editPopupBox {
		width: 100%;
		height: auto;
		padding: 20px 30px;
		box-sizing: border-box;
	}

	body {
		background: #fff;
	}

	.mod-form-rows .label-wrap {
		font-size: 12px;
	}

	.video-icon {
		width: 16px;
		height: 16px;
		background-size: 16px;
		margin: 3px;
	}

	.mod-form-rows .row-item {
		padding-bottom: 15px;
		margin-bottom: 0;
	}

	/*兼容IE7 ，重写common的演示*/
	.manage-wrapper {
		margin: 26px auto 0px auto;
		width: 600px;
	}

	.manage-wrap .ui-input {
		width: 198px;
	}

	.base-form {
		*zoom: 1;
	}

	.base-form:after {
		content: '.';
		display: block;
		clear: both;
		height: 0;
		overflow: hidden;
	}

	.base-form li {
		float: left;
		width: 290px;
	}

	.base-form li.odd {
		padding-right: 20px;
	}

	.manage-wrap textarea.ui-input {
		width: 588px;
		height: 60px;
		overflow: hidden;
	}

	#receiveFunds,
	#periodReceiveFunds {
		text-align: right;
	}

	#category {
		width: 182px
	}

	.contacters {
		margin-bottom: 10px;
	}

	.contacters h3 {
		margin-bottom: 10px;
		font-weight: normal;
	}

	.mod-form-rows .pb0 {
		padding-bottom: 0;
	}

	.mod-form-rows .ctn-wrap {
		overflow: visible;
	}

	.ui-combo-wrap {
		position: static;
	}

	#tipsBox,
	#tipsBoxRe {
		margin-top: 20px;
		margin-left: 30px;
		width: 460px;
	}

	#tipsBox p,
	#tipsBoxRe p {
		line-height: 24px;
	}

	.mod-form-rows .label-wrap {
		width: 50px;
		margin-right: 0;
	}

	.textbox.combo.datebox {
		line-height: 16px;
	}

	/* .textbox{border: 0;} */
</style>
<div id="manage-wrap" class="wrapper editPopupBox ">
	<form id="manage-form">
	<ul class="mod-form-rows base-form layui-form" id="base-form">
		<li class="row-item odd">
			<div class="label-wrap"><span class="red spe_red">*</span><label for="billstype">客户</label></div>
			<div class="ctn-wrap">
				<div class="layui-input-block" style="margin-left: 51px;min-height: 34px;">
					<select name="category_id" lay-filter="" lay-search="" id="customer">
						<option value="">空</option>
						{volist name="category" id="vo"}
						<option value="{$vo.id}" {if condition="$info.customer_id eq $vo.id" } selected="" {/if}>{$vo.name}</option>
						{/volist}
					</select>
				</div>
			</div>
		</li>
	</ul>
	<input type="hidden" name="id" value="{$info.id}">
	</form>


	<div class="contacters">
		<h3 class="dn">联系方式</h3>
		<div class="grid-wrap" style="width: calc(100% - 20px);">
			<table id="grid">
			</table>
			<!-- <div id="page"></div> -->
		</div>
	</div>


	<!-- 	以隐藏的方式获取联系地址的样式 ，作用是样式 -->
	<div id="pelem_goods" style="display:none;"> </div>

	<!-- 	以隐藏的方式获取联系地址的样式 ，作用是赋值 -->
	<!-- <div class="lxaddr" id="lxdzaddr" style="display:none;">
		<input type="text" id="lxaddr" value="" autocomplete="off" readonly="">
	</div> -->
	<div style="display:none;">
		<input type="text" id="goodsname" value="" autocomplete="off" readonly="">
	</div>

	<!-- 刷新保存表格数据 -->
	<div id="reloadTable" onclick="reloadTable()"></div>

	<!-- <div id="goodsBtn" onclick="chooseGood()"></div> -->


</div>
<script src="/public/static/admin/easyui/layui-v2.6.8/layui.js"></script>
<script type="text/javascript" src="/public/static/admin/easyui/jeasyui/jquery.easyui.min.js"></script>

<script>
	var edit_row = 0;
	var edit_col = 0;
	var row_id = 0;
	var col_name = 0;
	// 必须选择商品
	function chooseGood() {
		$("#grid").editCell(1, 2, true);
	}

	// 必填物料编码
	function chooseNumber(row) {
		$("#grid").editCell(row, 4, true);
	}


	$(document).ready(function () {
		$("#grid").jqGrid({
			//url:'/admin/staff/index.html?ajax=100',
			datatype: "local",//数据来源，本地数据（local，json,jsonp,xml等）
			height: '250px',//高度，表格高度。可为数值、百分比或'auto'
			//width: Public.setGrid().w,
			//height: Public.setGrid().h,
			colNames: ["", "goods_id", "<span class='red'>*</span>商品", "单位", "<span class='red'>*</span>物料编码", "unit_id"],
			colModel: [
				{ name: 'id', index: 'id', hidden: true, width: 70 },
				{ name: 'goods_id', hidden: true },
				{
					name: "goods_name",
					label: "商品",
					width: 220,
					title: !0,
					classes: "goods",
					editable: true,
					edittype: "custom",
					editoptions: {
						custom_element: function (t, e) {
							$("#pelem_goods").html('<div class="pr" id="elem_goods"><input type="text" value="' + t + '" class="textbox  customelement" name="goodsname" autocomplete="off" ><span class="ui-icon-ellipsis"></span></div>');
							return $("#elem_goods");
						},
						custom_value: function (t, e, a) {
							var ad = $("#goodsname").val();
							$("#goodsname").val("");//重置赋值
							return ad;
						},
						trigger: "ui-icon-ellipsis"
					}
				},
				{ name: 'unit_name', width: 120, editable: false },
				{ name: 'number', width: 150, editable: true },
				{ name: 'unit_id', width: 150, hidden: true },
			],
			cellEdit: true,
			cellurl: '/',

			rowNum: 10,
			rowList: [10, 20, 30],
			sortname: 'id',
			sortorder: "desc",
			pagerpos: "left",//分页位置

			pgbuttons: true,//翻页按钮
			pagination: false,
			altRows: !0,
			gridview: !0,
			shrinkToFit: !1,
			cellLayout: 8,
			autowidth: !0,
			pager: "#page",
			viewrecords: !0,
			cmTemplate: {
				sortable: !1,
				title: !1
			},
			loadError: function (t, e, i) {
				parent.Public.tips({
					type: 1,
					content: "操作失败了哦，请检查您的网络链接！"
				})
			},
			beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
				col_name = cellname;
				edit_row = iRow;
				edit_col = iCol;
				row_id = rowid;
				var gname = $("#grid").jqGrid("getCell", row_id, 'goods_name');
				$("#goodsname").val(gname);
			}
		});


		// var mydata = [];
		// for (var i = 0; i < 5; i++) {
		// 	var obj = { id: i + 1, name: "", telephone: "", phone: "", numbers: "", address: "", username: "" }
		// 	mydata.push(obj);
		// };

		let obj = { id: '{$info.id}', goods_id: '{$info.goods_id}', goods_name: '{$info.goods_name}', unit_name: '{$info.unit_name}', number: '{$info.number}' , unit_id: '{$info.unit_id}'};
		$("#grid").jqGrid('addRowData', 1, obj);
		
		// for (var i = 0; i <= mydata.length; i++) {
		// 	$("#grid").jqGrid('addRowData', i + 1, mydata[i]);
		// }

		$(".grid-wrap").on("click", ".ui-icon-ellipsis", function (e) {
			pre_choose_goods('/admin/basic/choose_goods.html', this);
		});




		function cLink(cellvalue, options, rowObject) {
			return '<div class="operating"><span class="ui-icon ui-icon-plus" title="新增行" onclick="add()"></span> <span class="ui-icon ui-icon-trash" onclick="del(' + rowObject.id + ')">删除</span></div>';
		}

	});


	// 选择商品
	function pre_choose_goods(url, obj) {
		choose_goods_parent(url, obj, function (res) {
			if (res.btn == 3 && res.status == 1) {
				//console.log(res);
				var data = res.data;
				if (data.status == 1) {

					var $count = data.info.count;
					var good_list = data.info.list;
					var allIds = $("grid").jqGrid('getDataIDs');
					var ids = $("#grid").getDataIDs();

					// console.log("当前行");
					// console.log(row_id);
					// console.log("长度："+ids.length);
					// console.log(ids);
					row_id = parseInt(row_id);
					var $cha_id = ids.length - row_id;//最后id-当前id
					var cha_han = $count - $cha_id - 1;//需要补充的行
					//console.log("cha:"+cha_han);
					//补充行
					for (let i = 0; i < $count; i++) {
						// $("#goodsname").val(data.info.name);
						//alert(row_id);
						$("#grid").jqGrid("saveCell", edit_row, edit_col);
						$("#grid").jqGrid("setCell", row_id + i, 'goods_id', good_list[i].id);
						$("#grid").jqGrid("setCell", row_id + i, 'goods_name', good_list[i].name);
						$("#grid").jqGrid("setCell", row_id + i, 'unit_name', good_list[i].dw);
						$("#grid").jqGrid("setCell", row_id + i, 'unit_id', good_list[i].unit);
					}
				} else {
					layer.msg("获取商品信息失败");
				}
			}
		});
	}


	function add() {
		var rows = $("#grid").jqGrid('getRowData');
		var obj = { id: rows.length + 1, name: "", telephone: "", phone: "", numbers: "", address: "", username: "" }
		$("#grid").addRowData(rows.length + 1, obj, "last");
		var rows = $("#grid").jqGrid('getRowData');
	}

	function del(rowId) {
		var rows = $("#grid").jqGrid('getRowData');
		if (rows.length <= 1) {
			layer.msg("至少保留一行");
			return false;
		}
		$("#grid").jqGrid("delRowData", rowId);
	}
</script>

<script type="text/javascript">
	function saveTab() {
		console.log("保存数据表格！");
		$("#grid").jqGrid("saveCell", edit_row, edit_col);
	}
	function reloadTable() {
		if (edit_row != 0 && edit_col != 0) {
			$("#grid").jqGrid("saveCell", edit_row, edit_col);
			edit_row = 0;
			edit_col = 0;
		}
	}

</script>

{include file="public/footer"/}